import {lazy, useEffect, useState} from 'react';
import {Button, Input, Form, message } from 'antd';

const {TextArea} = Input;
import {processDetails, taskDetails, processingApproval} from '@/axios/apis'
import {useSearchParams, useNavigate} from 'react-router-dom';
import OaTemplate from './OaTemplate.tsx'
import ApprovalRecords from "@/components/ApprovalRecords.tsx";
import Dialog from "@/components/Dialog.tsx";

const ViewForm = ({approveBtn = false}) => {
    // 动态加载组件的高阶组件
    let [searchParams] = useSearchParams()
    const navigate = useNavigate()
    let [processInfo, setProcessInfo] = useState({})
    let [formData, setFormData] = useState({})
    const [comTemplateName, setComTemplateName] = useState(null)
    const [examineForm] = Form.useForm();
    const [visible, setVisible] = useState(false)
    const [examineType, setExamineType] = useState<number>()
    useEffect(() => {
        switch (searchParams.get('formPage')) {
            case 'apply':
            case 'history':
                processDetails({applyId: searchParams.get('applyId')}).then(
                    (res) => {
                        if (+res?.code === 200) {
                            setProcessInfo(res.data)
                            setFormData(JSON.parse(res.data.formData))
                            setComTemplateName(res.data.templateName)
                        }
                    }
                )
                break
            case 'task':
                taskDetails({
                    primaryKeyId: searchParams.get('primaryKeyId'),
                    processInstanceId: searchParams.get('processInstanceId')
                }).then(
                    (res) => {
                        if (+res?.code === 200) {
                            setProcessInfo(res.data)
                            setFormData(JSON.parse(res.data.formData))
                            setComTemplateName(res.data.templateName)
                        }
                    }
                )
                break
            default:
                break
        }
    }, []);
    const examine = (examineType: number) => {
        setExamineType(examineType)
        setVisible(true)
    }
    const onFinish = () => {
        examineForm.validateFields().then(values => {
            console.log('v', values);
            // examineForm.resetFields()
            const data = {
                map: {agree: examineType},
                reviewComments: examineForm.getFieldValue("reviewComments"),
                taskId: searchParams.get('applyId'),
                formData: processInfo.formData,
                processInstanceId: processInfo.processinstanceId,
                primaryKeyId: searchParams.get('primaryKeyId'),
            };
            console.log(data, 'data')
            processingApproval(data).then((res) => {
                if (+res?.code === 200) {
                    message.success('审批成功')
                    navigate('/OAExamine/MineTcase')
                }
            })

        })
    }
    return (
        <div>
            <div className="applicationNumber">
                <div>申请单编号:{processInfo?.cabalaId}</div>
                <span>审批信息</span>
            </div>
            <OaTemplate comTemplateName={comTemplateName} formData={formData} />
            {approveBtn &&
                <div className="txtcenter">
                    <Button className='mr15' type="primary" onClick={() => examine(0)}>同意</Button>
                    <Button type="primary" danger onClick={() => examine(1)}>驳回</Button>
                </div>}
            <ApprovalRecords processInfo={processInfo} />
            <Dialog title={`审批意见（${examineType === 0 ? '同意' : '驳回'}）`} visible={visible} setVisible={setVisible}
                    width={666}
                    onOk={onFinish}
                    clear={() => {
                        examineForm.resetFields()
                    }}>
                <Form
                    wrapperCol={{span: 24}}
                    autoComplete="off"
                    form={examineForm}

                >
                    <Form.Item
                        name="reviewComments"
                        rules={[{required: true, message: '请输入审核意见'}]}
                    >
                        <TextArea rows={4} placeholder={`请输入${examineType === 0 ? '同意' : '驳回'}原因`} />
                    </Form.Item>
                </Form>
            </Dialog>
        </div>
    )
};

export default ViewForm;